<template>
	<view class="">
		<view class="boxs" v-if="dataList.length > 0">
			<view class="w100 flexenters  bgfff bor4 mt30 posre" v-for="(item,index) in dataList" :key="index">
				<view class="flexCenter w100" >
					<image class="w100s" :src="item.integralGoods.goodsCover" mode=""></image>
					<view class="w80">
						<view class="w100">
							<view class="co34363D f16">{{item.integralGoods.goodsName}}</view>
							<view class="flexenters w100">
								<view class="Colororgin">
									<text class="f36">{{item.integralGoods.exchangeScore}}</text>
									<text class="f24">积分</text>
								</view>
								<view>×{{item.exchangeCount}}</view>
							</view>
						</view>
						<view class="co989BA6">兑换时间：{{item.exchangeTime}}</view>
					</view>
				</view>
				<image v-if="item.exchangeStatus == 1" class="posabs" src="../../../static/img/draw.png" mode=""></image>
			</view> 
		</view>
		<view v-else>
			<null-page></null-page>
		</view>
	</view>
</template>

<script>
	import home from "@/serve/api/home.js"
	import nullPage from '@/common/null.vue'
	export default {
		components:{
			nullPage
		},
		data() {
			return {
				pageNum:1,
				dataList:[],
			}
		},
		onLoad() {
			this.particulars()
		},
		onReachBottom: function() {
				this.particulars();
		},
		methods: {
			async particulars() {
				let parme = {
					pageNum: this.pageNum,
					pageSize: 10,
				}
				const res = await home.selectOrderList(parme)
				this.pageNum += 1;
				this.dataList = this.dataList.concat(res.data.data.list)
				if (res.data.data.list.length < 10 && this.dataList.length > 0) {
					uni.showToast({
						icon: 'none',
						title: '已加载全部'
					})
				} else if (res.data.data.list.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无数据'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.selectIcon {
		width: 20rpx;
		height: 20rpx;
	}

	.boxs {
		padding: 0 10px 20px 10px;
		box-sizing: border-box;
	}

	.co34363D {
		color: #34363D;
		font-size: 16px;
	}

	.co989BA6 {
		color: #989BA6;
		font-size: 12px;
		margin-top: 5px;
	}

	.co017EFE {
		color: #017EFE;
		font-size: 18px;
	}

	.coFF5753 {
		color: #FF5753;
		font-size: 18px;
	}

	.bor_bottom {
		border-bottom: 1px solid #F2F4F8;
	}

	.bor4 {
		border-radius: 8px;
		padding: 12px;
		box-sizing: border-box;
	}

	.w80 {
		width: calc(100% - 100px);
		height: 100px;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 10px;
	}

	.Colororgin {
		color: #FF5753;
	}

	.w100s {
		width: 100px;
		height: 100px;
	}
	.posre{
		position: relative;
	}
	.posabs{
		width: 36px;height: 36px;position: absolute;right: 0;top: 0;
	}
</style>
